root@NetStudio:/www# cat main.html 
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>包含另一个网页的页面</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        h1 {
            margin: 10px 0;
        }

        iframe {
            border: 2px solid #000;
            width: 640px;
            height: 480px;
        }

        /* 新增的容器样式 */
     .button-textbox-container {
            display: flex;
            width: 640px;
            margin-top: 20px;
        }

        /* 呼喊按钮样式 */
     .呼喊按钮 {
            flex: 2;
            padding: 15px 30px;
            font-size: 16px;
            background-color: #007BFF; /* 蓝色 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

     .呼喊按钮:hover {
            background-color: #0056b3; /* 鼠标悬停时颜色变深 */
        }

        /* 文本框样式 */
     .文本框 {
            flex: 2;
            padding: 10px;
            font-size: 16px;
            margin-left: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        /* 退出按钮样式 */
     .退出按钮 {
            flex: 1;
            padding: 15px 30px;
            font-size: 16px;
            background-color: #FF3B30; /* 红色 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

     .退出按钮:hover {
            background-color: #c72b23; /* 鼠标悬停时颜色变深 */
        }
    </style>
</head>

<body>
    <h1>基于 NetStudio 的火灾监控报警系统</h1>
    <iframe src="http://192.168.10.1:8080/?action=stream" title="嵌入的网页"></iframe>
    <div class="button-textbox-container">
        <button class="呼喊按钮">Shout</button>
        <input type="text" class="文本框" readonly placeholder=" ">
        <button class="退出按钮">Exit</button>
    </div>

    <script>
        const 呼喊按钮 = document.querySelector('.呼喊按钮');
        const 文本框 = document.querySelector('.文本框');
        const 退出按钮 = document.querySelector('.退出按钮');

        // 呼喊按钮按下事件
        呼喊按钮.addEventListener('mousedown', function () {
		const loopCount = 5;
		for (let i = 0; i < loopCount; i++) {
            		fetch('/cgi-bin/set_gpio.cgi?gpio=461&value=1')
         		.then(response => {
                    		if (!response.ok) {
                        		throw new Error('网络响应错误');
                    	}
                   	 return response.text();
                	})
        		 .then(data => console.log(data))
        		 .catch(error => console.error('设置 GPIO 时出错:', error));
		}
        });

        // 呼喊按钮松开事件
        呼喊按钮.addEventListener('mouseup', function () {
            fetch('/cgi-bin/set_gpio.cgi?gpio=461&value=0')
         .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.text();
                })
         .then(data => console.log(data))
         .catch(error => console.error('设置 GPIO 时出错:', error));
        });

        // 监听 gpio462 的值
        function checkGpio462() {
            fetch('/cgi-bin/get_gpio.cgi?gpio=462')
         .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.text();
                })
         .then(data => {
                    if (data.trim() === '0') {
                        文本框.value = "Fire in the Hole!!!";
                        setTimeout(() => {
                            文本框.value = "";
                        }, 8000);
                    }
                })
         .catch(error => console.error('获取 GPIO 时出错:', error));
        }

        setInterval(checkGpio462, 1000); // 每秒检查一次

        // 退出按钮点击事件
        退出按钮.addEventListener('click', function () {
            window.history.back();
        });
    </script>
</body>

</html>
